<!doctype html>
<html>

<head>
	<title>Cinequest</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<style type="text/css">

	</style>
	<script>
		
		var proxy = "cinequestProxy.php?";
		var selectedTab = -1;
		var festival;			
		var schedules;
		var filmsDates = {};	// to store lists of films by date 
		
		$(function(){

			getFestival();
			getSchedules();

			$('#index').on('pageshow', function(){
				var img = $('#img-cinequest');
				var width = img.width();
				var maxWidth = img.parent().width();
				if (width > maxWidth)
				{
					img.height(img.height * maxWidth / width);
					img.width(maxWidth);				
				}
						
			});

			$('#img-cinequest').load(function(){
				var img = $('#img-cinequest');
				var width = img.width();
				var maxWidth = img.parent().width();
				if (width > maxWidth)
				{
					img.height(img.height * maxWidth / width);
					img.width(maxWidth);				
				}
			});

			$('#festival').on('pageinit', function(){

			});

			$('#festival').on('pageshow', function(){
				if (selectedTab == -1 || selectedTab == 0)
				{
					$('#filmsTab').attr('checked', true).checkboxradio('refresh');
					$('#events').hide();
					$('#forums').hide();
					$('#films').show();
					selectedTab = 0;
				}
				else if (selectedTab == 1)
				{
					$('#eventsTab').attr('checked', true).checkboxradio('refresh');
					$('#films').hide();
					$('#forums').hide();
					$('#events').show();
					selectedTab = 1;
				}
				else if (selectedTab == 2)
				{
					$('#forumsTab').attr('checked', true).checkboxradio('refresh');
					$('#events').hide();
					$('#films').hide();
					$('#forums').show();
					selectedTab = 2;
				}
			});

			$('#filmsTab').click(function(){
				$('#events').hide();
				$('#forums').hide();
				$('#films').show();
				selectedTab = 0;
			});
			$('#eventsTab').click(function(){
				$('#films').hide();
				$('#forums').hide();
				$('#events').show();
				selectedTab = 1;
			});
			$('#forumsTab').click(function(){
				$('#events').hide();
				$('#films').hide();
				$('#forums').show();
				selectedTab = 2;
			});

			$('#events').append('<h1>Test 2</h1>');
			$('#forums').append('<h1>Test 3</h1>');

		});

		function getFestival(){
			$.ajax({
				type: "GET",
				url: proxy + "type=festival",
				data: "xml",
				success: function(xml){
					festival = xml;
					localStorage['festival'] = festival;
					console.log('ajax success for festival');
				},
				error: function(xhr){
					console.log('ajax failed for festival:' + xhr.statusText);
				}
			});
		}

		function loadDates(){
			var currentDate = '';
			var dateParts;
			var dateDisplay;
			var count = -1;
			var htmlString = '';
			var tag;
			var nextDate;
			$(schedules).find('schedule').each(function(){
				tag = $(this);
				nextDate = tag.attr('start_time').split(' ')[0];
				if (nextDate !== currentDate)
				{
					dateParts = nextDate.split('-');
					dateDisplay = dateParts[1] + '-' + dateParts[2] + '-' + dateParts[0];
					filmsDates[dateDisplay] = [];
					if (count > 0)
					{
						htmlString += '</a><span class="ui-li-count">' + count + '</span></li>' + '<li><a href="#filmsDates" onclick="listFilms(\'' + dateDisplay + '\')">' + dateDisplay;
					}
					else
					{
						htmlString += '<li><a href="#filmsDates" onclick="listFilms(\'' + dateDisplay + '\')">' + dateDisplay;
					}
					count = 1;
					currentDate = nextDate;
				}
				else
				{
					count++;		
				}
				filmsDates[dateDisplay].push({"id": tag.attr('program_item_id'), "title": tag.attr('title'), "startTime": tag.attr('start_time'), "endTime": tag.attr('end_time'), "venue": tag.attr('venue')});
			});
			htmlString += '</a><span class="ui-li-count">' + count + '</span></li>';
			$('#list-dates').append(htmlString);
			localStorage['filmsDates'] = JSON.stringify(filmsDates);
			$('#list-dates').listview('refresh');
		}

		function convertTime(h, m){
			if (h < 12)
			{
				return h + ':' + m + ' AM';
			}
			else
			{
				return (h == 12 ? h + ':' + m + ' PM' : h - 12 + ':' + m + ' PM');
			}
		}

		function listFilms(dateString){
			// alert(JSON.parse(localStorage['filmsDates'])[dateString][0]['title']);
			var films = filmsDates[dateString];
			var startTime;
			var endTime;
			var htmlString = '';
			for (var i = 0; i < films.length; i++)
			{
				startTime = films[i]['startTime'].split(' ')[1].split(':');
				endTime = films[i]['endTime'].split(' ')[1].split(':');
				// htmlString += '<tr><td><input type="checkbox" id="r' + films[i]['id']  + '" onclick="updateSchedule(\'' + films[i]['id']  + '\')" /></td><td id="' + films[i]['id']  + '" onclick="showFilmDetail(\'' + films[i]['id']  + '\')">' + '<strong>' + films[i]['title']  + '</strong><br /><small>Time: ' + films[i]['startTime'] + ' - ' + films[i]['endTime'] + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Venue: ' + films[i]['venue']  + '</small></td></tr>';
				htmlString += '<li><a href="#filmDetail" id="' + films[i]['id']  + '" onclick="showFilmDetail(\'' + films[i]['id']  + '\')">' + '<h1>' + films[i]['title']  + '</h1><p><small>Time: ' + convertTime(startTime[0], startTime[1]) + ' - ' + convertTime(endTime[0], endTime[1]) + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Venue: ' + films[i]['venue']  + '</small></p></a><a id="s' + films[i]['id']  + '" onclick="updateScheduleFilms(\'' + films[i]['id']  + '\', \'' + films[i]['title'].replace("\\", "\\\\").replace("'", "\\\'") + '\', \'' + films[i]['startTime'] + '\', \'' + films[i]['endTime'] + '\', \'' + films[i]['venue'] + '\')"></a></li>';
			}
			$('#name-filmsDates').html('<h2>Films on ' + dateString  + '</h2>');
			$('#list-filmsDates').html(htmlString);
			$('#list-filmsDates').listview('refresh');
		}

		function showFilmDetail(id){
			// $('#' + id).css({'background-color': 'rgb(170, 210, 240)'});
					
		}

		function updateScheduleFilms(id, title, startTime, endTime, venue){
			// alert(id + ' ' + title + ' ' + startTime + ' ' + endTime + ' ' + venue);		
			if (updateSchedule(id, title, startTime, endTime, venue))
			{
				$('#' + id + ' > p').append('<span class="schedule"><small><br /><br />(Added to schedule)</small></span>');
				$('#' + id).css({'background-color': 'rgb(170, 210, 240)'});
			}
			else
			{
					
			}
		}

		function updateSchedule(id, title, startTime, endTime, venue){
			return true;
		}
		
		function getSchedules(){
			$.ajax({
				type: "GET",
				url: proxy + "type=schedules",
				data: "xml",
				success: function(xml){
					schedules = xml;
					localStorage['schedules'] = xml;
					console.log('ajax success for schedules');
					loadDates();
				},
				error: function(xhr){
					console.log('ajax failed for schedules' + xhr.statusText);		
				}
			});
		}



	</script>
</head>

<body>
<!-- Index page -->
	<div data-role="page" id="index" data-title="Cinequest - Home" >

		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href="#schedule" class="ui-btn-right" data-icon="grid" data-iconpos="right">Schedule</a>
			<div data-role="navbar">
				<ul>
					<li><a class="ui-btn-active ui-state-persist">Home</a></li>
					<li><a href="#festival">Festival</a></li>
					<li><a href="#dvds">DVDs</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			<div align="center">
				<img id="img-cinequest" src="img/creative.gif" />
			</div>
		</div>

	</div>

<!-- Festival page -->
	<div data-role="page" id="festival" data-title="Cinequest - Festival" >

		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href="#schedule" class="ui-btn-right" data-icon="grid" data-iconpos="right">Schedule</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#index">Home</a></li>
					<li><a class="ui-btn-active ui-state-persist">Festival</a></li>
					<li><a href="#dvds">DVDs</a></li>
				</ul>
			</div>
		</div>
		
		<div data-role="content">
			<div data-role="controlgroup" data-type="horizontal" align="center">
				<label for="filmsTab">Films</label>
				<input type="radio" id="filmsTab" name="festival-tabs" />
				<label for="eventsTab">Events</label>
				<input type="radio" id="eventsTab" name="festival-tabs" />
				<label for="forumsTab">Forums</label>
				<input type="radio" id="forumsTab" name="festival-tabs" />
			</div>

		<!-- Films page -->
			<div id="films">
				<br />
				<ul id="list-dates" data-role="listview" data-inset="true">
					
				</ul>
			</div>

		<!-- Events page -->
			<div id="events" style="display:none">

			</div>

		<!-- Forums page -->
			<div id="forums" style="display:none">

			</div>



		</div>

	</div>

<!-- DVDs page -->
	<div data-role="page" id="dvds" data-title="Cinequest - DVDs" >

		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href"#schedule" class="ui-btn-right" data-icon="grid" data-iconpos="right">Schedule</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#index">Home</a></li>
					<li><a href="#festival">Festival</a></li>
					<li><a class="ui-btn-active ui-state-persist">DVDs</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			
		</div>

	</div>

<!-- FilmsDates page -->
	<div data-role="page" id="filmsDates" data-add-back-btn="true">
		
		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href="#schedule" class="ui-btn-right" data-icon="grid" data-iconpos="right">Schedule</a>
		</div>

		<div data-role="content">
			<div id="name-filmsDates" align="center">

			</div>

			<ul id="list-filmsDates" data-role="listview" data-split-icon="grid">

			</ul>
		</div>

	</div>

<!-- FilmDetail page -->
	<div data-role="page" id="filmDetail" data-add-back-btn="true">
		
		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href="#schedule" class="ui-btn-right" data-icon="grid" data-iconpos="right">Schedule</a>
		</div>

		<div data-role="content">
			
		</div>

	</div>

<!-- Schedule page -->
	<div data-role="page" id="schedule" data-add-back-btn="true">
		
		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>My Cinequest<br /> Schedule</h1>
		</div>

		<div data-role="content">
			
		</div>
		
	</div>


</body>

</html>






















































